<template>
    <div class="container bill">
        <page-table :func="func" ref="pt" v-bind="$route.query"  @updateCount="updateCount"
		@selectChange="selectChange"
		:props="{'row-style':tableRowStyle,ref:'table','row-class-name':tableRowClass}"
        >
            <template slot="img" slot-scope="data">
                <image-preview :src="data.data.row.img"></image-preview>
            </template>
			<template v-slot:moreoperation="{data}">
				<el-button type="primary" size="small" @click="gotoEdit(data.row.id)" v-permission="'bill:edit'">编辑</el-button>
				<!-- <div>
					{{ data.row.isDefault }}
				</div> -->
			</template>
			<template v-slot:batchChange>
				<el-button type="danger" v-permission="batchOperationNeedPer" size="mini" :disabled="checkboxNoChange" @click="showChangeOrderStatus=true">批量修改</el-button>
			</template>
			<template v-slot:platform="{data}" >
				{{ TypeOptions.find(item=>item.value==data.row.platform)?.label }}
			</template>
			<template v-slot:orderMoney="{data}">
				{{ data.column.label }} ({{ orderMoney }})
			</template>
			<template v-slot:status="{data}">
                <el-tag v-if="data.row.status==0" type="warning">未支付</el-tag>
                <el-tag v-else-if="data.row.status==1" type="success">已支付</el-tag>
                <el-tag v-else-if="data.row.status==3" type="danger">坏账</el-tag>
            </template>
        </page-table>
		<el-dialog
		title="批量修改账单"
			v-model="showChangeOrderStatus"
			:visible.sync="showChangeOrderStatus">
			<el-tabs v-model="batchTabMode">
				<el-tab-pane label="订单状态" name="status" v-if="permission.includes(batchOperationNeedPer[0])">
					
				</el-tab-pane>
				<el-tab-pane label="所属店铺" name="shop" v-if="permission.includes(batchOperationNeedPer[1])">
					
				</el-tab-pane>
			</el-tabs>
			<json-form ref="changeOrder" :options="batchOperationOption[batchTabMode]" :form="changeOrderForm[batchTabMode]" direction="h">

			</json-form>
			<!-- <span slot="footer">
                    <el-button @click="closeBatchDialog">关闭</el-button>
                </span> -->
		</el-dialog>
    </div>
</template>
<script>
import pageTable from "@/components/page-table.vue"
import ImagePreview from "@/components/image-preview.vue"
import func from "./index.js"
import { PayOptions, TypeOptions } from "@/views/bill/constant"
import { changeBillStatus,changeBillShop } from "@/apis/bill"
import NP from "number-precision"
import JsonForm from "@/components/json-form.vue"
import dayjs from "dayjs"
import minMax from "dayjs/plugin/minMax"
import { mapState } from "vuex"
import store from "@/store"
import { success } from "@/util/notice"
dayjs.extend(minMax)
let nowDate = dayjs()

export default {
	name:"shopEdit",
	components:{
		pageTable,
		ImagePreview,
		JsonForm
	},
	data(){
		return {
			func,
			TypeOptions,
			orderMoney:0,
			maxTimeStamp:0,
			minDate:nowDate,
			maxDate:nowDate,
			checkboxNoChange:true,
			showChangeOrderStatus:false,
			changeOrderForm:{
				status:{
					status:1
				},
				shop:{}
			},
			batchOperationOption:{
				status:[
					{
						key:"status",
						label:"支付状态",
						type:"el-select",
						options:PayOptions,
					},
					{
						key:"confirm",
						label:"确认",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"primary"
						},
						listeners:{
							click:()=>{
								this.$refs.changeOrder.submit(form=>{
									let ids = this.$refs.pt.checkboxSelected.map(item=>item.billNo)
									let dto = {
										...form,
										ids
									}
									
									console.log(dto)
									changeBillStatus(dto).then(res=>{
										if(res.data){
											this.showChangeOrderStatus = false
											this.$refs.pt.checkboxSelected.forEach(item=>{
												item.status = form.status
											})
											this.$refs.pt.checkboxSelected = []
											this.$refs.pt.$refs.table.clearSelection()
										}
									})
								})
								console.log("click btn")
							}
						}
					},
					{
						key:"cancel",
						label:"取消",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"danger"
						},
						listeners:{
							click:()=>{
								this.showChangeOrderStatus = false
								// console.log("click btn",this)
							}
						}
					}
				],
				shop:[	
					{
						key:"shopId",
						label:"所属店铺",
						type:"el-select-v2",
						width:"450px",
						readStore:"shopOption",
						props:{
							clearable:true,
							filterable:true,
							// options:store.state.option.shopOption
						},
						required:true
					},
					{
						key:"confirm",
						label:"确认",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"primary"
						},
						listeners:{
							click:()=>{
								this.$refs.changeOrder.submit(form=>{
									let ids = this.$refs.pt.checkboxSelected.map(item=>item.billNo)
									let dto = {
										...form,
										ids
									}
									
									console.log(dto,"批量修改店铺")
									changeBillShop(dto).then(res=>{
										if(res.data.status){
											success("操作成功")
											this.showChangeOrderStatus = false
											this.$refs.pt.checkboxSelected.forEach(item=>{
												item.shopName = res.data.shopName
											})
											this.$refs.pt.checkboxSelected = []
											this.$refs.pt.$refs.table.clearSelection()
										}
									})
								})
								console.log("click btn")
							}
						}
					},
					{
						key:"cancel",
						label:"取消",
						removeLabel:true,
						width:false,
						type:"el-button",
						props:{
							type:"danger"
						},
						listeners:{
							click:()=>{
								this.showChangeOrderStatus = false
								// console.log("click btn",this)
							}
						}
					}
				
				]
			},
			batchOperationNeedPer:["billbatch:delete","billbatch:changeShop"],
			batchTabNames:["status","shop"],
			batchTabMode:"",
		}
	},
	mounted(){
		this.batchOperationNeedPer.forEach((item,index)=>{
			if(this.permission.includes(item) && !this.batchTabMode){
				this.batchTabMode = this.batchTabNames[index]
			}
		})
	},
	methods:{
		gotoEdit(id){
			this.$router.push({
				path:"/bill/edit",
				query:{
					id,
					type:"edit"
				}
			})
		},
		updateCount(data){
			this.orderMoney = data.orderMoney
		},
		selectChange(checked){
			if(checked.length>0){
				this.checkboxNoChange = false
			}else{
				this.checkboxNoChange = true
			}
		},
		initDate(tableData){
			// this.maxDate = 
			let dateList = tableData.map(item=>dayjs(item.activeDate))
			console.log(dateList)
			this.maxDate = dayjs.max([this.maxDate,...dateList])
			this.minDate = dayjs.min([this.minDate,...dateList])
			this.maxTimeStamp = this.maxDate.diff(this.minDate,"day")
			if(this.maxTimeStamp<7 || this.maxTimeStamp>7){
				this.maxTimeStamp = 7
			}
		},
		tableRowStyle({row}){
			// console.log(row)
			if(row.status==0){
				let diffDay = this.maxDate.diff(dayjs(row.activeDate),"day")
				if(diffDay>7){
					diffDay=7
				}
				// console.log(diffDay,this.maxTimeStamp)
				// console.log(diffDay/this.maxTimeStamp)
				let persen = NP.round(diffDay/this.maxTimeStamp,2)
				let lastpercent = NP.round(persen * 0.4 / 1,2) 
				console.log(persen,lastpercent)
				// console.log(persen)
				// let gapUnix = nowUnix - this.minDate.unix()
				// console.log(row.activeDate,nowUnix,gapUnix/this.maxTimeStamp)
				return {background:"rgba(255,0,0,"+lastpercent+")"}
			}
			return {}	
		},
		tableRowClass({row}){
			if(row.status==0){
				return "nohover"
			}
		},
		closeBatchDialog(){
			this.showChangeOrderStatus = false
			this.$refs.pt.checkboxSelected = []
			this.$refs.pt.$refs.table.clearSelection()

		}
	},
	computed:{
		...mapState(["permission"])
	}
}
</script>
<style scoped>
.bill >>> .el-table__body tr.nohover:hover > td {
     background-color: transparent;
 }
</style>